<template>
    <div>
        <h1 style="width: 100%;font-size: 30px;">申报审批</h1>
            <el-tabs type="border-card" class="demo-tabs">
                <el-tab-pane>
                    <template #label>
                        <span class="custom-tabs-label">
                        <span>未审批</span>
                        </span>
                    </template>
                    <el-table :data="tableData" border style=" width:100%">
                        <el-table-column prop="customerName" label="客户" />
                        <el-table-column prop="name" label="商品" />
                        <el-table-column prop="orderQuantity" label="数量" />
                        <el-table-column prop="orderAmount" label="总金额" />
                        <el-table-column prop="orderDate" label="下单时间" />
                        <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="kai(scope.row)">
                                查看
                            </el-button>         
                        </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="已审批">
                    <el-table :data="tableData2" border style=" width:100%">
                        <el-table-column prop="customerName" label="客户" />
                        <el-table-column prop="name" label="商品" />
                        <el-table-column prop="orderQuantity" label="数量" />
                        <el-table-column prop="orderAmount" label="总金额" />
                        <el-table-column prop="orderDate" label="下单时间" />
                        <el-table-column prop="approvalStatus" label="审批" />
                        <el-table-column prop="comment" label="批注" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
    </div>
    <el-dialog v-model="dialogFormVisible" title="审批" width="500">
    <el-form :model="form">
      <el-form-item label="客户：" :label-width="100">
        <el-input v-model="form.customerName" disabled/>
      </el-form-item>
      <el-form-item label="商品：" :label-width="100">
        <el-input v-model="form.name" disabled/>
      </el-form-item>
      <el-form-item label="数量：" :label-width="100">
        <el-input v-model="form.orderQuantity" disabled/>
      </el-form-item>
      <el-form-item label="总金额：" :label-width="100">
        <el-input v-model="form.orderAmount" disabled/>
      </el-form-item>
      <el-form-item label="下单时间：" :label-width="100">
        <el-input v-model="form.orderDate" disabled/>
      </el-form-item>
      <el-form-item label="收货地址：" :label-width="100">
        <el-input v-model="form.contactAddress" disabled/>
      </el-form-item>
      <el-form-item label="批注：" :label-width="100">
        <el-input v-model="form.comment"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="guan">取消</el-button>
        <el-button type="danger" @click="xiugai('已拒绝')">
          拒绝
        </el-button>
        <el-button type="primary" @click="xiugai('已通过')">
          通过
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { reactive,ref,onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { updateXSByState,selectAllByState } from '@/api/xs';
import { ElMessage } from 'element-plus';
import router from '@/router';
const userstore=useUserStore()
const user=userstore.user
const dialogFormVisible=ref(false)
let form = {}
const kai=((value)=>{
    dialogFormVisible.value = true
    form=value
})
const guan=(()=>{
    dialogFormVisible.value = false
})
const xiugai=(async(value)=>{
    form.approvalStatus=value
    if(await updateXSByState(form)){
        guan()
        setTimeout(router.go(0),500)
    }else{
        ElMessage.error("审批失败")
    }
})
const tableData=ref(null)
const tableData2=ref(null)
const select=(async()=>{
    let response={}
    response=await selectAllByState("待审批");
    tableData.value= response.data.data
    response=await selectAllByState("审批后");
    tableData2.value= response.data.data
})
onMounted(()=>{
    select()
})
</script>

<style lang="scss" scoped>
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    .demo-tabs .custom-tabs-label .el-icon {
        vertical-align: middle;
    }
    .demo-tabs .custom-tabs-label span {
        vertical-align: middle;
        margin-left: 4px;
    }
</style>